iOS性能优化之计算多行Label高度的新方法
☝个知识点：点击上方蓝字可以关注我们
为什么要写这篇文章
一、最近在对我们自己的项目中feed流进行优化，在使用Instruments的Time Profiler对项目进行分析时，发现这个方法比较耗时，所以想要对这个方法的调用进行优化，所以对多行Label高度计算进行了一些研究。
@available(iOS 7.0, *)
open func boundingRect(with size: CGSize, options: NSStringDrawingOptions = [], attributes: [NSAttributedString.Key : Any]? = nil, context: NSStringDrawingContext?) -> CGRect
二、本文中“根据字体来计算字符串总宽度，从而得到多行Label高度”的方法是我自己想的，也比较新颖，网上也没有找到资料，有些业务场景我所在的项目组可能没有接触到，但是其他项目组的技术同学在日常开发中可能会碰到，如果这篇文章能够给他们造成一些启发，也能够让这篇文章发挥价值。
优化历程
单次异步调用boundingRect方法
一开始是在这篇文章（https://www.jianshu.com/p/2efcf7ad2608?appinstall=0）里面看到有说到异步调用boundingRect方法，里面的代码我搬过来了：
+(void)textBoundingRectWithString:(NSString *)string maxHeight:(CGFloat)maxHeight maxWidth:(CGFloat)maxWidth textFont:(UIFont *)textFont Block:(void (^)(CGSize obj))block
{
/* 如果传入内容有误，直接返回结果到当前线程*/
if (!textFont || [self isBlankString:string] == YES) {
if (block) {
block(CGSizeMake(0, 0));
}
return;
}
/* 异步执行计算操作*/
dispatch_async(dispatch_get_global_queue(0, 0), ^{
CGSize lastSize;
if (maxHeight == 0) {
CGSize size = [string boundingRectWithSize:CGSizeMake(maxWidth, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:textFont} context:nil].size;
lastSize = CGSizeMake(ceilf(size.width), ceilf(size.height));
}else
{
CGSize size = [string boundingRectWithSize:CGSizeMake(maxWidth, maxHeight) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:textFont} context:nil].size;
lastSize = CGSizeMake(ceilf(size.width), ceilf(size.height));
}
/* 计算完成后再主线程中回调数据，因为一般拉倒值后会直接设置UI控件属性。 */
dispatch_async(dispatch_get_main_queue(), ^{
if (block) {
block(lastSize);
}
});
});
}
在项目中完整的流程是这样的
网络请求获取数据，对JSON数据进行序列化得到模型数组modelList
对模型数组modelList进行遍历
在遍历过程中，调用boundingRect方法，计算每个model对应的cell的label高度，label高度计算完成后得到cell的高度，切换到主线程完成对model的height的赋值操作
遍历完成后对tableView进行刷新
流程图如下：
但是实际测试后发现这样并不可行，对模型数组modelList遍历完成后，tableView进行刷新时，tableView在调用代理方法
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
获取高度时，可能异步计算操作并未完成，这个时候返回的cell高度并不是正确的高度，这样在tableView下一次reloadData时，此时异步计算操作已经完成，heightForRowAtIndexPath返回的高度会与此时显示的cell的高度不一致，从而导致tableView的contentSize和contentOffset发生变化，从而发生抖动。
异步处理数据，回主线程刷新列表
这种方法的思路就是：
网络请求获取数据，对JSON数据进行序列化得到模型数组modelList
切换到子线程对模型数组modelList进行遍历
在遍历过程中，调用boundingRect方法，计算每个model对应的cell的label高度，label高度计算完成后得到cell的高度，完成对model的height属性的赋值操作
遍历完成后切换到主线程对tableView进行刷新
流程图如下：
这种方法与上面的方法相比，把整个遍历过程放在子线程中进行，遍历完成后再切回到主线程刷新tableView，防止tableView刷新时，model中的height还没有异步计算完，造成显示的高度不正确，也是我们相对较好的做法，但是它依然无法解决boundingRect方法计算比较慢的问题，尤其是需要处理的数据比较多时，这样的做法只是避免了掉帧（因为比较耗时的数据处理不在主线程中），但是由于需要在线程对高度计算完之后才进行tableView刷新，会导致用户等待刷新的时间过长。
计算Label高度的新方法
所以我就观察Label的构成，以下是一个在iOS平台上以font为system font，size为16，style为regular显示的Label，
我们可以发现，其实当字体固定时，所有中文字符的所占的宽度是固定的值，每个数字，大写字母，小写字母，符号所占的宽度也是固定的，而且相对于中文而言，数字，大写字母，小写字母，符号的数量是可控的，所以我就在想，能不能在第一次使用某个字体计算Label高度时，预先把这种字体对应中文字符，数字，大写字母，小写字母，常见的符号的宽度进行计算并缓存在一个widthDictionary中，然后之后对Label进行高度计算时，对Label应该显示的string进行遍历，得到每个字符占位的宽度，然后得到string对应的总宽度，根据label的最大宽度，计算得到Label的高度。
流程图如下：
代码如下：
import Foundation
import UIKit
class StringCalculateManager {
static let shared = StringCalculateManager()
//fontDictionary是一个Dictionary，例如{".SFUIText-Semibold-16.0": {"0":10.3203125, "Z":10.4140625, "中":16.32, "singleLineHeight":19.09375}}，
//fontDictionary的key是以字体的名字和大小拼接的String，例如".SFUIText-Semibold-16.0"
//fontDictionary的value是一个Dictionary，存储对应字体的各种字符对应的宽度及字体的单行高度，例如{"0":10.3203125, "Z":10.4140625, "中":16.32, "singleLineHeight":19.09375}
var fontDictionary = [String: [String: CGFloat]]()
var numsNeedToSave = 0//更新的数据的条数
var fileUrl: URL = {//fontDictionary在磁盘中的存储路径
let manager = FileManager.default
var filePath = manager.urls(for: .documentDirectory, in: .userDomainMask).first
filePath!.appendPathComponent("font_dictionary.json")
print("font_dictionary.json的路径是===\(filePath!)")
return filePath!
}()
init() {
readFontDictionaryFromDisk()
NotificationCenter.default.addObserver(self, selector: #selector(saveFontDictionaryToDisk), name: UIApplication.didEnterBackgroundNotification, object: nil)
NotificationCenter.default.addObserver(self, selector: #selector(saveFontDictionaryToDisk), name: UIApplication.willTerminateNotification, object: nil)
}
deinit {
NotificationCenter.default.removeObserver(self)
}
//第一次使用字体时预先计算该字体中各种字符的宽度
func createNewFont(font: UIFont) -> [String: CGFloat] {
let array: [String] = ["中", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "“", ";", "？", ",", "［", "]", "、", "【", "】", "?", "!", ":", "|"]
var widthDictionary = [String: CGFloat]()
var singleWordRect = CGRect.zero
for string in array {
singleWordRect = string.boundingRect(with: CGSize(width: 100, height: 100),
options: .usesLineFragmentOrigin,
attributes: [NSAttributedString.Key.font: font],
context: nil)
widthDictionary[string] = singleWordRect.size.width
}
widthDictionary["singleLineHeight"] = singleWordRect.size.height
let fontKey = "\(font.fontName)-\(font.pointSize)"
fontDictionary[fontKey] = widthDictionary
numsNeedToSave = array.count//代表有更新，需要存入到磁盘
saveFontDictionaryToDisk()//存入本地json
return widthDictionary
}
//计算Label的bounds
func calculateSize(withString string: String, size: CGSize, font: UIFont) -> CGRect {
var widthDictionary = [String: CGFloat]()
let fontKey = "\(font.fontName)-\(font.pointSize)"
if let dictionary = StringCalculateManager.shared.fontDictionary[fontKey] {
widthDictionary = dictionary
} else {
widthDictionary = StringCalculateManager.shared.createNewFont(font: font)
}
var totalWidth: CGFloat = 0
let chineseWidth = widthDictionary["中"]!
for character in string {
if "\u{4E00}" <= character && character <= "\u{9FA5}" {//中文
totalWidth += chineseWidth
} else if let width = widthDictionary[String(character)] {//数字，小写字母，大写字母，及常见符号
totalWidth += width
} else {//符号及其他没有预先计算好的字符，对它们进行计算并且缓存到宽度字典中去
let tempString = String(character)
let width = tempString.boundingRect(with: CGSize(width: CGFloat.greatestFiniteMagnitude, height: CGFloat.greatestFiniteMagnitude),
options: .usesLineFragmentOrigin,
attributes: [NSAttributedString.Key.font: font],
context: nil).size.width
totalWidth += width
widthDictionary[tempString] = width
numsNeedToSave += 1
}
}
fontDictionary[fontKey] = widthDictionary
if numsNeedToSave > 10 {
saveFontDictionaryToDisk()
}
let singleLineHeight = widthDictionary["singleLineHeight"]!
let numsOfLine = ceil(totalWidth/size.width)//行数
let resultwidth = numsOfLine <= 1 ? totalWidth : size.width//小于最大宽度时，取实际宽度的值
let resultHeight = (singleLineHeight*numsOfLine) > size.height ? size.height : (singleLineHeight*numsOfLine)//计算结果超出最大高度时，取最大高度的值
return CGRect.init(x: 0, y: 0, width: resultwidth, height: resultHeight)
}
let queue = DispatchQueue(label: "com.StringCalculateManager.queue")
//存储fontDictionary到磁盘
@objc func saveFontDictionaryToDisk() {
guard numsNeedToSave > 0 else {
return
}
numsNeedToSave = 0
queue.async {//防止多线程同时写入造成冲突
do {
var data: Data?
if #available(iOS 11.0, *) {
data = try? JSONSerialization.data(withJSONObject: self.fontDictionary, options: .sortedKeys)
} else {
data = try? JSONSerialization.data(withJSONObject: self.fontDictionary, options: .prettyPrinted)
}
try data?.write(to: self.fileUrl)
print("font_dictionary存入磁盘,font_dictionary=\(self.fontDictionary)")
} catch {
print("font_dictionary存储失败error=\(error)")
}
}
}
//从磁盘中读取缓存
func readFontDictionaryFromDisk() {
do {
let data = try Data.init(contentsOf: fileUrl)
let json = try JSONSerialization.jsonObject(with: data, options: .allowFragments)
guard let dict = json as? [String: [String: CGFloat]] else {
return
}
fontDictionary = dict
print(fontDictionary)
print("font_dictionarys读取成功,font_dictionarys=\(fontDictionary)")
} catch {
print("font_dictionary读取失败")
}
}
}
extension String {
func boundingRectFast(withMaxSize size: CGSize, font: UIFont) -> CGRect {
let rect = StringCalculateManager.shared.calculateSize(withString: self, size: size, font: font)
return rect
}
}
外部调用的示例：
let title = "iOS性能优化之计算多行Label高度的新方法"
let rect = title.boundingRectFast(withMaxSize: constraintRect, font: UIFont.boldSystemFont(ofSize: 16))
为了证明这种计算方法确实优于系统的boundingRect方法，
@available(iOS 7.0, *)
open func boundingRect(with size: CGSize, options: NSStringDrawingOptions = [], attributes: [NSAttributedString.Key : Any]? = nil, context: NSStringDrawingContext?) -> CGRect
在Demo中进行测试
我写了一个demo(https://github.com/577528249/StringCalculate)，来对方法耗时进行测试，代码如下：
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
oldWay(value: 1)
newWay(value: 1)
oldWay(value: 10)
newWay(value: 10)
oldWay(value: 100)
newWay(value: 100)
oldWay(value: 1000)
newWay(value: 1000)
oldWay(value: 10000)
newWay(value: 10000)
oldWay(value: 100000)
newWay(value: 100000)
oldWay(value: 1000000)
newWay(value: 1000000)
print("测试完成")
}
func oldWay(value: Int) {
let attribute = [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 16)]
let constraintRect = CGSize.init(width: 100, height: 60)
var title = ""
var rect = CGRect.zero
print("oldWay开始计算了")
let startTime = CFAbsoluteTimeGetCurrent();
for i in 0...value {
title = "iOS性能优化之计算多行Label高度的新方法\(i)"
rect = title.boundingRect(with: constraintRect,
options: .usesLineFragmentOrigin,
attributes: attribute,
context: nil)
}
let duration = (CFAbsoluteTimeGetCurrent() - startTime) * 1000.0;
print("使用oldWay计算\(value)次，总耗时\(duration) ms")
}
func newWay(value: Int) {
let constraintRect = CGSize.init(width: 100, height: 60)
var title = ""
var rect = CGRect.zero
print("newWay开始计算了")
let startTime = CFAbsoluteTimeGetCurrent();
for i in 0...value {
title = "iOS性能优化之计算多行Label高度的新方法\(i)"
rect = title.boundingRectFast(withMaxSize: constraintRect, font: UIFont.boldSystemFont(ofSize: 16))
}
let duration = (CFAbsoluteTimeGetCurrent() - startTime) * 1000.0;
print("使用newWay计算\(value)次，总耗时\(duration) ms")
}
}
测试环境：Xcode 10.1，iPhone 7，iOS 12.1
测试输出：
将测试结果汇总后如下：
我们可以看到只执行一次系统方法boundingRect时和我们的新方法boundingRectFast时，时间反而比执行十次的要多，这是因为可能第一次执行系统方法boundingRect时涉及到一些初始化操作，而后面执行十次时不包含这些初始化操作的时间。我们的新方法boundingRectFast，第一次执行比较慢是因为需要初始化StringCalculateManager单例对象，并且从磁盘中读取json文件，我尝试着在测试之前，调用StringCalculateManager单例对象，然后进行测试，发现执行一次我们的新方法boundingRectFast，耗时只有0.21398067474365234ms，这也证明了我们的猜想。
对于这种方法的性能比较，我们应该尽可能取调用次数最多，然后来比较，这样才能忽略其他因素，当我们分别执行一百万次系统方法boundingRect和boundingRectFast时，它们的执行总时间分别是128962.29195594788ms和29827.147006988525ms，相除得到，boundingRectFast执行时间是系统方法boundingRect的执行时间的23.12%，所以从性能角度上考虑，还是可以考虑在项目中采用这种方法来计算Label的高度的。
在实际项目中进行测试
因为demo中的运行环境相对比较简单，所以我在我们自己的项目中对着两个方法进行测试，首先为了方便在Instruments中查看运行效果，我写了三个方法
extension String {
//项目中需要计算的地方会统一调用这个方法
func boundingRectFast(withMaxSize size: CGSize, font: UIFont) -> CGRect {
let rect1 = boundingRectFastInOldWay(withMaxSize: size, font: font)
let rect2 = boundingRectFastInNewWay(withMaxSize: size, font: font)
return rect2
}
//使用系统方法计算
func boundingRectFastInOldWay(withMaxSize size: CGSize, font: UIFont) -> CGRect {
return self.boundingRect(with: size,
options: .usesLineFragmentOrigin,
attributes: [NSAttributedStringKey.font: font],
context: nil)
}
//使用新方法计算
func boundingRectFastInNewWay(withMaxSize size: CGSize, font: UIFont) -> CGRect {
let rect = StringCalculateManager.shared.calculateSize(withString: self, size: size, font: font)
return rect
}
}
测试环境：Xcode 10.1，iPhone 7，iOS 12.1
测试步骤：把App从手机上删除，然后点击Xcode上的Product->Profile,在App完成安装后选择Timer Profiler对app运行状态进行监测，点击开始，在App启动后，快速滑动feed流页面，然后我截取了从app启动后的50s，测试结果如下：
发现使用boundingRectFastInOldWay方法总共耗时353ms，在主线程中占时2.1%，使用boundingRectFastInNewWay方法总共耗时46ms，在主线程中占时0.2%，所以从性能来说，boundingRectFastInNewWay方法远优于boundingRectFastInOldWay方法，所以在我们自己的项目中，已经采用了这种方法去计算Label的高度。
最 后
我觉得“根据字体来计算字符串总宽度，从而得到多行Label高度”这种方法是比较新颖，我们项目中暂时遇到的业务场景是用来计算Label高度，我觉得应该有更多的业务场景可以使用，希望能给大家带来一些启发。
demo地址：
https://github.com/577528249/StringCalculate
推荐阅读
🔽